<!DOCTYPE HTML>
<html lang="zxx">
<head>
<title>登录</title>
<link href="../images/favicon.ico" rel="shortcut icon" />

<!-- Meta tag Keywords -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8" />
<meta name="keywords" content="Triple Forms Responsive Widget,Login form widgets, Sign up Web forms , Login signup Responsive web form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements" />

<link rel="stylesheet" type="text/css" href="../layui/css/layui.css"/>
<link rel="stylesheet" href="css/login.css"/>
<link href="css/font-awesome.min.css" rel="stylesheet">

</head>
<body style="background:url(images/b.jpg) no-repeat;background-size:100% 100%">
	<div class="main-bg" id="mian">
		<h1>影院售票管理系统</h1>
		<div class="sub-main-w3" id="login">
			<div class="vertical-tab">
				<div id="section1" class="section-w3ls">
					<input type="radio" name="sections" id="option1" checked>
					<label for="option1" class="icon-left-w3pvt"><span class="fa fa-user-circle" aria-hidden="true"></span>登录</label>
					<article>
						<form action="#" method="post">
							<h4 class="legend">账号登录</h4>
							<div class="input">
								<span  aria-hidden="true"><i class="layui-icon ">&#xe66f;</i></span>
								<input type="text" value="luo" placeholder="用户名" id="name" required />
							</div>
							<div class="input ">
								<span  aria-hidden="true"><i class="layui-icon ">&#xe673;</i></span>
								<input type="password" value="123" placeholder="密码" id="pass" required />
							</div>
							<div class="input" style="height:16px">
								<span ><i class="layui-icon ">&#xe679;</i></span>
								<input type="text"  placeholder="输入验证码" id="code" required/>
								<img src="http://localhost:8080/cinema/api/google.png" title="看不清楚，点击刷新" id="gg" style="cursor: pointer;"/>
							</div>
							<button type="button" class="btn submit" @click="login" @keyup.enter="login">登 录</button>
							<!--<a href="#" class="bottom-text-w3ls">忘记密码?</a>-->
						</form>
					</article>
				</div>
				
				<div id="section2" class="section-w3ls">
					<input type="radio" name="sections" id="option2">
					<label for="option2" class="icon-left-w3pvt"><span class="fa fa-pencil-square" aria-hidden="true"></span>注册</label>
					<article>
						<form action="#" method="post">
							<h5 class="legend">注册帐户</h5>
							<div class="input zhuce">
								<span aria-hidden="true"><i class="layui-icon ">&#xe66f;</i></span>
								<input type="text" id="register_name" placeholder="用户名" @blur="checkName" required />
							</div>
							<div class="input zhuce" >
								<span aria-hidden="true"><i class="layui-icon ">&#xe678;</i></span>
								<input type="text" placeholder="手机" id="phone" required />
							</div>
							<div class="input zhuce">
								<span  aria-hidden="true"><i class="layui-icon ">&#xe673;</i></span>
								<input type="password" placeholder="密码" id="register_password" required />
							</div>
							<div class="input zhuce">
								<span  aria-hidden="true"><i class="layui-icon ">&#xe673;</i></span>
								<input type="password" placeholder="确认密码" id="confirmPassword" required />
							</div>
							<button type="button" class="btn submit zhuces" @click="register">注 册</button>
						</form>
					</article>
				</div>
				
				<div id="section3" class="section-w3ls">
					<input type="radio" name="sections" id="option3">
					<label for="option3" class="icon-left-w3pvt"><span class="fa fa-lock" aria-hidden="true"></span>忘记密码?</label>
					<article>
						<form action="#" method="post">
							<h3 class="legend last">重置密码</h3>
							<p class="para-style">请在下面输入您的电子邮件地址，我们将给您发送一封带有说明的电子邮件。</p>
							<p class="para-style-2"><strong>需要帮助?</strong>了解更多关于如何 <a href="#">#</a></p>
							<div class="input">
								<span  aria-hidden="true"><i class="layui-icon ">&#xe618;</i></span>
								<input type="email" placeholder="邮箱" name="email" required />
							</div>
							<button type="submit" class="btn submit last-btn">提交</button>
						</form>
					</article>
				</div>
			</div>

			<div class="clear"></div>
		</div>

		<div class="copyright">
			<h2>Copyright &copy; 2020 - {{nowYear}} 版权所有| by
				<a href="http://www.gd-nf.com.cn/"> gd-nf</a>
			</h2>
		</div>

	</div>
	
	
	<script src="../js/jquery-1.12.4.min.js"></script>
	<!-- <script type="text/javascript" src="../layui/layui.js"></script> -->
	<script src="../layer/layer.js"></script>
	<script src="../js/Vue.js"></script>
	<script src="js/login.js"></script>

	<script>
		//实现点击切换验证码
		document.querySelector("#gg").onclick=function(){
			//第一：选择要操作的节点
			//第二：操作
			// alert(imgNode.src) ; 
			// URL地址重写 code.gif?r=44
			this.src = "http://localhost:8080/cinema/api/google.png?r=" + Math.random();
		}
	</script>
</body>
</html>
